<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div>文件上传 <input type="file" multiple onchange="upload(event)" /></div>
    Progress
    <div id="progress"></div>
    Output
    <div id="output"></div>
  </body>
  <script>
    const progressDOM = document.getElementById('progress');
    const outputDOM = document.getElementById('output');
    function upload(event){
    console.log('upload--')
    let files = event.target.files, //获取所有上传的文件对象。
        type  = 'default', //上传文件的类型(浏览器器需要明确类型然后展示)。
        progress = progressDOM,//展示文件上传的进度。
        output = outputDOM; //展示上传的文件的信息。
        fileReader = new FileReader(); //实例化文件加载器
        for(let i = 0; i < files.length ; i++){
            if(/image/.test(files[i].type)){ //判断文件类型
                type = "image";
                fileReader.readAsDataURL(files[i]);//读取文件并将内容的URL数据保存到 result 中
            } else {
                type = "text";
                fileReader.readAsText(files[i]);//在文件中读取文件并将文本信息保存到 result 中
            }
            //监听文件加载是否失败
            fileReader.onerror = function(event){
                console.log('文件加载失败。');
            }
            //监听文件加载进度
            fileReader.onprogress = function(event){
                console.log('文件读取中--');
                if(event.lengthComputable){ //判断事件能否监听进度
                    progress.innerHTML = event.loaded / event.total
                    if(Number(progress.innerHTML) > 0){
                        throw new Error('读取文件失败')
                    }
                }
            }
            //监听文件是否加载成功
            fileReader.onload = function(event){
                console.log('文件读取成功--');
                let html = ''
                switch(type){
                    case 'image':
                        html = `<img src=${fileReader.result}>`;
                        break;
                    case 'text':
                        html = fileReader.result;
                        break;
                }
                console.log('html--',html)
                output.innerHTML = html
            }
            //监听文件读取完成(无论成功还是失败)
            fileReader.onloadend = function(){
                console.log('文件读取完成--');
            }
        }
    }
  </script>
</html>
